import React, { useEffect, useState } from 'react'
import { getProList } from './../../api/pro';
import { Space, Button, Table } from 'antd';
import { useColumns } from './hooks';

const Com = () => {
  const [ prolist, setProlist ] = useState([])
  const columns = useColumns()

  useEffect(() => {
    getProList().then( res => {
      setProlist( res.data )
    })
  }, [])

  const saveHandle = () => {
    const ExportJsonExcel = require("js-export-excel");
    var option = {};
    
    option.fileName = "导出文件";
    option.datas = [
      {
        sheetData: prolist,
        sheetName: "工作区1",
        sheetFilter: ['proname', 'img1', 'category', 'brand', 'originprice'],
        sheetHeader: ["产品名称", "产品图片", '分类', '品牌', '原价'],
        columnWidths: [20, 20],
      }
    ];
    
    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  }
  
  return (
    <div>
      <Space direction="vertical" style={{ width: '100%', height: 700 }}>
        <Button onClick={saveHandle}>导出数据</Button>
        <Table dataSource={prolist} columns = { columns } rowKey="proname" style={{ width: '100%', height: 600}}></Table>
      </Space>
    </div>
  )
}
// http://lbsyun.baidu.com/apiconsole/register/activate?key=97b2448f409ebc3148e069ab606f5a0b
export default Com